<template>
  <div class="trends-wrapper" :style="{ 'height': documentClientHeight + 'px' }">
    <div class="left">
      <el-calendar v-model="selectDay"></el-calendar>
      <el-form label-position="top" style="padding: 0 20px;">
        <el-form-item label="筛选版块">
          <el-select :multiple="true" :filterable="true" v-model="plateIds" @change="getProjectList()" placeholder="请选择版块">
            <el-option style="width: 200px;" v-for="item in plateArr" :key="item.id" :label="item.plateName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="筛选项目">
          <el-select :multiple="true" :filterable="true" v-model="projectIds"  @change="searchData(true)" placeholder="请选择项目">
            <el-option style="width: 200px;" v-for="item in projectArr" :key="item.id" :label="item.taskName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="筛选人员">
          <div @click="selectDingUsers('plateProjectManagerIdArr','plateProjectManagerName','plateProjectManagerId', 'plateProjectAvator', 'plateProjectManagerNameArr')" class="select-btn"><span><i class="el-icon-plus"></i></span>添加</div>
          <div class="select-btn" v-for="(member, idx) in form.plateProjectManagerNameArr" :key="member">
            <span><img :src="form.plateProjectAvator[idx] || '/static/img/avatar.c58e465.png'"/></span>{{member}}
            <div class="del" @click="delMember(idx)">移除</div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="right">
      <div class="content-wrapper">
        <div class="content" v-infinite-scroll="loadTrends" infinite-scroll-disabled="disabled" infinite-scroll-immediate="true" infinite-scroll-distance="10">
          <div class="date-wrapper" v-for="dateSection in dateCollect" :key="dateSection">
            <p class="date">{{dateSection}}</p>
            <div class="project-wrapper">
              <div v-for="(projectName, projectIndex) in trendDataCollect[dateSection].projectNames" :key="projectName" class="project">
                <div class="project-header"><i class="el-icon-coin" style="position: absolute;left: 14px;top: 9px;"></i>{{projectName}}</div>
                <div class="project-trend-wrapper">
                  <div class="project-trend" v-for="trend in trendDataCollect[dateSection][trendDataCollect[dateSection].projectIds[projectIndex]]" :key="trend.id">
                    <div class="time">{{trend.dynamicCreateTime.substr(11, 5)}}</div>
                    <div class="avatar"><img :src="trend.executorAvatar" alt=""></div>
                    <div class="trend-detail">
                      <p class="row-1">{{trend.dynamicExecutiveName}} <span>{{trend.dynamicPerformOperation}}</span></p>
                      <span class="row-2" @click="openProjectDetail(trend.dynamicTaskId)" v-if="trend.dynamicAscription === '1'">{{trend.dynamicTaskName}}</span>
                      <span class="row-2" @click="openTaskDetail(trend.dynamicTaskId)" v-else>{{trend.dynamicTaskName}}</span>
                      <p class="row-3">{{trend.dynamicContent}}</p>
                      <div class="fileitem" style="width: 470px;" v-for="file in trend.dynamicAttachment" :key="file.url">
                        <span style="cursor: pointer;" @click="downloadFile(file.url, file.name)">
                          <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">{{file.name}}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <img v-if="dateCollect.length === 0 && !isFirstLoading" style="width:200px;margin: auto;position:absolute;top:0;right:0;left:0;bottom: 0;" src="../../../assets/livolobim/empty.png" alt="">
        </div>
      </div>
    </div>
    <AddOrUpdateTask ref="AddOrUpdateTask2" @refresh="searchData(true)"></AddOrUpdateTask>
    <TaskDetail ref="TaskDetail2" @addSubTaskHandle="addOrUpdateTaskHandle" @closeSelf="hideTaskDetail" @refresh="searchData(true)" :taskDetailVisible.sync="taskDetailVisible"></TaskDetail>
    <project-detail ref="ProjectDetail" @updateProject="addOrUpdateProjectHandle" @refresh="searchData(true)" :pojectDetailVisible.sync="pojectDetailVisible"></project-detail>
    <add-or-update-project ref="AddOrUpdateProject" :addOrUpdateVisible.sync="addOrUpdateVisible"></add-or-update-project>
  </div>
</template>

<script>
import Menu from './component/Menu'
import {dateUtil} from '@/utils/dateUtil'
import dingMixin from  '@/mixins/ding'
import TaskDetail from './task-detail'
import AddOrUpdateTask from './add-or-update-task'
import ProjectDetail from './project-detail'
import AddOrUpdateProject from './add-or-update-project'

export default {
  data() {
    return {
      documentClientHeight: '',
      currentIndex: 1,
      selectDay: '',
      taskDetailVisible: false,   //打开任务详情页
      pojectDetailVisible: false,
      addOrUpdateVisible: false,
      currentMenuName: '按项目统计',
      menuList: [{
        index: 1,
        icon: 'el-icon-document',
        isFolder: true,
        name: '按项目统计'
      },{
        index: 2,
        name: '我关注的'
      },{
        index: 3,
        name: '我管理的'
      },{
        index: 4,
        name: '我负责的'
      },{
        index: 5,
        icon: 'el-icon-document',
        isFolder: true,
        name: '按版块统计'
      },{
        index: 6,
        name: '我管理的'
      },{
        index: 7,
        icon: 'el-icon-document',
        isFolder: true,
        name: '自定义'
      }],
      currentMenuIndex: 1,
      dateCollect: [],
      trendDataCollect: {},
      isFirstLoading: true,
      loading: false,
      page: 1,
      totalPage: 1,
      currentDate: '',
      plateIds: '',
      projectIds: '',
      dynamicExecutiveId: '',
      plateArr: [],
      projectArr: [],
      form: {
        plateProjectManagerId: '',
        plateProjectManagerName: '',
        plateProjectAvator: [],
        plateProjectManagerNameArr: [],
        plateProjectManagerIdArr: [],
      },
    }
  },
  computed: {
    disabled () {
      return this.isFirstLoading || this.loading || this.noMore
    },
    noMore () {
      return this.page >= this.totalPage;
    }
  },
  components: {
    Menu,
    TaskDetail,
    AddOrUpdateTask,
    ProjectDetail,
    AddOrUpdateProject
  },
  watch: {
    selectDay(target) {
      this.currentDate = new Date(target).Format("yyyy-MM-dd");
      this.searchData(true);
    }
  },
  mixins: [dingMixin],
  methods:{
    addOrUpdateTaskHandle(data){
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.AddOrUpdateTask2.init(data);
      })
    },
    hideTaskDetail() {
      this.taskDetailVisible = false;
    },
    // 打开项目详情页
    async openProjectDetail(id) {
      this.pojectDetailVisible = true;
      this.$nextTick(() => {
        this.$refs.ProjectDetail.init(id);
      })
    },
    //新增或编辑项目
    addOrUpdateProjectHandle(id){
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.AddOrUpdateProject.init(id)
      })
    },
    // 打开任务详情页
    async openTaskDetail(id) {
      this.taskDetailVisible = true;
      this.$nextTick(() => {
        this.$refs.TaskDetail2.init(id);
      })
    },
    loadTrends() {
      this.loading = true;
      this.page ++;
      this.searchData();
    },
    selectDingUsers(ids, name, idsStr, avator, names){
      this.complexPicker(300, [], this.form[ids]).then((data)=>{
        this.form[ids] = data.map(item => item.emplId);
        this.form[avator] = data.map(item => item.avatar)
        this.form[names] = data.map(item => item.name)
        this.form[name] = this.form[names].join(',');
        this.form[idsStr] = this.form[ids].join(',')
        this.searchData(true)
      })
    },
    delMember(idx) {
      this.form.plateProjectAvator.splice(idx,1); 
      this.form.plateProjectManagerNameArr.splice(idx,1); 
      this.form.plateProjectManagerIdArr.splice(idx,1); 
      this.form.plateProjectManagerId = this.form.plateProjectManagerIdArr.join(',')
      this.form.plateProjectManagerName = this.form.plateProjectManagerNameArr.join(',')
      this.searchData(true)
    },
    async getProjectList() {
      let projectResult = await this.$httpN.postB('division/task/filterProjectList', {searchType: 3, limit: 999, plateIds: this.plateIds.join(',')});
      this.projectArr = projectResult.list;
      this.projectIds = [];
      await this.searchData(true);
    },
    async searchData(init) {
      if(init) {
        this.page = 1;
        this.dateCollect = [];
        this.trendDataCollect = {};
        this.isFirstLoading = true;
      }
      let {list, totalPage} = await this.$httpN.postB('division/dynamic/list', {
        dynamicAscription: '1',
        dynamicTaskId: '',
        plateIds: this.plateIds.join(','),
        projectIds: this.projectIds.join(','),
        dynamicExecutiveId: this.form.plateProjectManagerId,
        searchTime: this.currentDate,
        page: this.page
      })

      this.setDataToCollect(list)

      this.loading = false;
      if(init) {
        this.totalPage = totalPage;
        this.$nextTick(() => {
          this.isFirstLoading = false;
        })
      }
    },
    setDataToCollect(list) {
      if(list.length > 0) {
        list.forEach(item => {
          if(item.dynamicAttachment) item.dynamicAttachment = JSON.parse(item.dynamicAttachment);
          if(this.dateCollect.includes(item.dayGroup)) {
            if(this.trendDataCollect[item.dayGroup].projectIds.includes(item.projectId)){
              this.trendDataCollect[item.dayGroup][item.projectId].push(item);
            }else {
              this.trendDataCollect[item.dayGroup].projectIds.push(item.projectId);
              this.trendDataCollect[item.dayGroup].projectNames.push(item.projectName);
              this.$set(this.trendDataCollect[item.dayGroup], item.projectId, [item])
            }
          }else {
            this.dateCollect.push(item.dayGroup);
            this.$set(this.trendDataCollect, item.dayGroup, {
              projectIds: [item.projectId],
              projectNames: [item.projectName],
              [item.projectId]: [item]
            })
          }
        })
      }
    },
    downloadFile: function (url, fileName) {//跨域文件路径、下载到本地的文件名
      if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(url)) return this.dingPreviewPic(url);
      if(!url) return;
      var x = new XMLHttpRequest();
      x.open("GET", url, true);
      x.responseType = 'blob';
      x.onload=function(e) {
        var url = window.URL.createObjectURL(x.response)
        var a = document.createElement('a');
        a.href = url
        a.download = fileName;
        a.click()
      }
      x.send();
    },
    getPic(filename) {
      if(filename) {
        if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438103037435905.png'
        }else if(/\.(txt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438530785140737.png'
        }else if(/\.(xls|xlsx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438725690253314.png'
        }else if(/\.(doc|docx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439195636850689.png'
        }else if(/\.(psd)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439984203751426.png'
        }else if(/\.(pdf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440139145535490.png'
        }else if(/\.(ppt|pptx|dps|dpt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440657859305473.png'
        }else if(/\.(rar|zip|arj|gz)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442063039193090.png'
        }else if(/\.(html|htm)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442135319633921.png'
        }else if(/\.(dwg|bak|dwt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276441741667459074.png'
        }else if(/\.(wav|aif|au|mp3|ram|wma|mmf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442006684524546.png'
        }else if(/\.(avi|mov|rmvb|rm|flv|mp4)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442233483124737.png'
        }else{
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
        }
      }else {
        return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
      }
    }
  },
  async mounted() {
    this.documentClientHeight = document.documentElement['clientHeight'] - 50
    window.onresize = () => {
      this.documentClientHeight = document.documentElement['clientHeight'] - 50
    }
    this.currentDate = dateUtil.thisDay();
    let projectResult = await this.$httpN.postB('division/task/projectList', {searchType: 3, limit: 999});
    this.projectArr = projectResult.list;

    let ModuleResult = await this.$httpN.postB('division/plate/list', {participateType: 2, limit: 999});
    this.plateArr = [...ModuleResult.list];
    await this.searchData(true)
  }
}
</script>

<style lang="scss">
  .content-wrapper .content::-webkit-scrollbar {/*滚动条整体样式*/
    width: 0px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 0px;
    scrollbar-arrow-color:red;
  }

  .trends-wrapper .left::-webkit-scrollbar {/*滚动条整体样式*/
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
    scrollbar-arrow-color:red;
  }
  .trends-wrapper .left::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px #DEDEDE;
    background: rgba(0,0,0,0.2);
    scrollbar-arrow-color:red;
  }
  .trends-wrapper .left::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px #F5F5F5;
    border-radius: 0;
    background: rgba(0,0,0,0.1);
  }


  .trends-wrapper{
    display:flex;
    .left{
      width: 250px;
      height: 100%;
      z-index: 1;
      background: #FFF;
      overflow: auto;
      box-shadow: 3px 0 4px #F0F0F0;
      .select-btn{
        position: relative;
        float:left;
        font-weight: normal;
        margin-right: 5px;
        margin-bottom: 10px;
        width: 80px;
        height: 28px;
        border-radius: 30px;
        background: #FAFAFA;
        border: 1px solid #ECECEC;
        position: relative;
        padding-left: 21px;
        line-height: 28px;
        color: #7982A7;
        font-size: 12px;
        text-align: center;
        cursor: pointer;
        span{
          position: absolute;
          top: 1px;
          left: 1px;
          display:block;
          height: 24px;
          width: 24px;
          background: #CACACA;
          color: white;
          border-radius: 50%;
          text-align: center;
          line-height: 24px;
          img{
            width: 24px;
            height: 24px;
            border-radius: 50%;
          }
        }
        .del{
          position: absolute;
          top:0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 30px;
          color: white;
          text-align: center;
          background:rgba(130, 130, 130, 0.9);
          display: none;
        }
        &:hover{
          .del{
            display: block;
          }
        }
      }
    }
    >.right{
      flex:1 ;
      background: #F5F7F9;
      .content-wrapper{
        height: calc(100%);
        padding: 20px;
        padding-top: 0;
        .content{
          z-index: 2;
          height: 100%;
          overflow-y: auto;
          position: relative;
          .date{
            font-size: 18px;
            margin: 20px 0;
          }
          .project-wrapper{
            padding: 40px 40px 30px;
            background: white;
            box-shadow: 0px 0px 4px rgb(221, 221, 221);
            border-radius: 3px;
            .project-header{
              display: inline-block;
              min-width: 240px;
              line-height: 32px;
              border-radius: 100px;
              background: #ECECEC;
              color: #75797E;
              text-align: center;
              margin-left: 55px;
              position: relative;
              padding-left: 30px;
              padding-right: 30px;
            }
            .project-trend-wrapper{
              .project-trend{
                display: flex;
                .avatar{
                  width: 40px;
                  margin-left: 20px;
                  margin-right: 15px;
                  position: relative;
                  img{
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    position: absolute;
                    z-index: 2;
                  }
                  &::after{
                    content: '';
                    height: 100%;
                    position: absolute;
                    top:0;
                    left: 19.5px;
                    z-index: 1;
                    border-width: 1px;
                    border-style: dashed;
                    border-color: #ECECEC;
                    border-right-width: 0px;
                  }
                }
                &:last-child{
                  .avatar::after{
                    content: none;
                  }
                }
                &:first-child{
                  .avatar::before{
                    content: '';
                    height: 30px;
                    position: absolute;
                    top:-30px;
                    left: 19.5px;
                    z-index: 1;
                    border-width: 1px;
                    border-style: dashed;
                    border-color: #ECECEC;
                    border-right-width: 0px;
                  }
                }
                .time{
                  margin-top: 10px;
                  color: #B8BFCB;
                }
                .trend-detail{
                  padding-top: 5px;
                  padding-bottom: 40px;
                  flex:1;
                  p{
                    margin: 0;
                  }
                  .row-1{
                    span{
                      margin-left: 15px;
                      color:#606266;
                    }
                  }
                  .row-2{
                    margin: 10px 0;
                    font-size: 13px;
                    display: inline-block;
                    color: #C0C4CC;
                    cursor: pointer;
                    &:hover{
                      color: #409EFF;
                    }
                  }
                  .row-3{
                    color: #909399;
                    margin-bottom: 10px;
                    white-space: pre-line;
                  }
                }
              }
              .project-trend:first-child{
                margin-top: 30px;
              }
            }
          }
        }
      }
    }
  }
  .trends-wrapper .el-calendar-table .el-calendar-day{
    height: auto;
  }
  .trends-wrapper .el-calendar__header{
    display: block;
    .el-calendar__title{
      margin-bottom:5px;
    }
  }
  .fileitem{
  line-height: 32px;
  margin-bottom: 5px;
  background: #F5F5F5;
  width: 474px;
  padding-left:15px;
  font-size: 12px;
  .uploadtip{
    float:right;
    margin-right: 20px;
    cursor: pointer;
  }
}
</style>